import ReactDOM from 'react-dom'
// !1. 先定以
// 大写字母开头
function Hello() {
  // 一般函数组件中不会用到 this
  console.log(this)
  // 必须 return
  // return 的内容会被当做 UI 进行渲染
  return <h1>Hello React</h1>
}
// Hello() // window.Hello()

// console.log(Hello())

// !2. 单标签闭合
// ReactDOM.render 渲染组件的过程
// 解析标签 <Hello/>，发现标签是以大写开头的，所以会被当作组件进行解析，又发此组件是通过函数定义的，内部会调用这个函数，调用之后就拿到 JSX 了
// 随后把 JSX（虚拟 DOM / React 元素）转换成真是 DOM 渲染到页面
ReactDOM.render(<Hello />, document.querySelector('#root'))
// ReactDOM.render(<Hello></Hello>, document.querySelector('#root'))

// 注意：下面写法确实也能出来内容，但是是当作函数用的，而不是组件
// ReactDOM.render(Hello(), document.querySelector('#root'))
